<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Loading特效</title>
    <style>
        #loadingContainer {
            width: 500px;
            margin: 50px auto;

        }

        #loadingContainer h1 {
            font-size: 26px;
            text-align: center;
            margin-top: 30px;
            background: #efefef;
        }

        /* 菊花状的Loading效果 */

        .sk-fading-circle {
            width: 40px;
            height: 40px;
            position: relative;
            margin: 0 auto;
        }

        .sk-fading-circle .sk-circle {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        .sk-fading-circle .sk-circle:before {
            content: '';
            display: block;
            margin: 0 auto;
            width: 15%;
            height: 15%;
            background-color: #333;
            border-radius: 100%;
            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
        }

        .sk-fading-circle .sk-circle2 {
            transform: rotate(30deg);
        }

        .sk-fading-circle .sk-circle3 {
            transform: rotate(60deg);
        }

        .sk-fading-circle .sk-circle4 {
            transform: rotate(90deg);
        }

        .sk-fading-circle .sk-circle5 {
            transform: rotate(120deg);
        }

        .sk-fading-circle .sk-circle6 {
            transform: rotate(150deg);
        }

        .sk-fading-circle .sk-circle7 {
            transform: rotate(180deg);
        }

        .sk-fading-circle .sk-circle8 {
            transform: rotate(210deg);
        }

        .sk-fading-circle .sk-circle9 {
            transform: rotate(240deg);
        }

        .sk-fading-circle .sk-circle10 {
            transform: rotate(270deg);
        }

        .sk-fading-circle .sk-circle11 {
            transform: rotate(300deg);
        }

        .sk-fading-circle .sk-circle12 {
            transform: rotate(330deg);
        }

        .sk-fading-circle .sk-circle2:before {
            animation-delay: -1.1s;
        }

        .sk-fading-circle .sk-circle3:before {
            animation-delay: -1s;
        }

        .sk-fading-circle .sk-circle4:before {
            animation-delay: -0.9s;
        }

        .sk-fading-circle .sk-circle5:before {
            animation-delay: -0.8s;
        }

        .sk-fading-circle .sk-circle6:before {
            animation-delay: -0.7s;
        }

        .sk-fading-circle .sk-circle7:before {
            animation-delay: -0.6s;
        }

        .sk-fading-circle .sk-circle8:before {
            animation-delay: -0.5s;
        }

        .sk-fading-circle .sk-circle9:before {
            animation-delay: -0.4s;
        }

        .sk-fading-circle .sk-circle10:before {
            animation-delay: -0.3s;
        }

        .sk-fading-circle .sk-circle11:before {
            animation-delay: -0.2s;
        }

        .sk-fading-circle .sk-circle12:before {
            animation-delay: -0.1s;
        }

        @-webkit-keyframes sk-circleFadeDelay {
            0%,
            39%,
            100% {
                opacity: 0;
            }
            40% {
                opacity: 1;
            }
        }

        /* 琴谱版Loading */

        .spinner {
            height: 40px;
            margin: 0 auto;
            text-align: center
        }

        .spinner>div {
            background-color: #333;
            height: 100%;
            width: 6px;
            display: inline-block;
            animation: sk-stretchdelay 1.2s infinite ease-in-out;
        }

        .spinner .rect2 {
            animation-delay: -1.1s;
        }

        .spinner .rect3 {
            animation-delay: -1.0s;
        }

        .spinner .rect4 {
            animation-delay: -0.9s;
        }

        .spinner .rect5 {
            animation-delay: -0.8s;
        }

        .spinner .rect6 {
            animation-delay: -0.7s;
        }

        @keyframes sk-stretchdelay {
            0%,
            40%,
            100% {
                transform: scaleY(0.4);
            }
            20% {
                transform: scaleY(1.0);
            }
        }

        /* 翻转Loading */

        .rotateSpinner {
            width: 60px;
            height: 60px;
            background-color: #333;
            margin: 0 auto;
            -webkit-animation: rotateplane 1.2s infinite ease-in-out;
            animation: rotateplane 1.2s infinite ease-in-out;
        }

        @-webkit-keyframes rotateplane {
            0% {
                -webkit-transform: perspective(120px)
            }
            50% {
                -webkit-transform: perspective(120px) rotateY(180deg)
            }
            100% {
                -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
            }
        }

        @keyframes rotateplane {
            0% {
                transform: perspective(120px) rotateX(0deg) rotateY(0deg);
                -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
            }
            50% {
                transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
                -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
            }
            100% {
                transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
                -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            }
        }

        /* 圆形放大Loading */

        .ballSpinner {
            width: 60px;
            height: 60px;
            margin: 0 auto;
            position: relative;
        }

        .double-bounce1,
        .double-bounce2 {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #333;
            opacity: 0.6;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-animation: bounce 2.0s infinite ease-in-out;
            animation: bounce 2.0s infinite ease-in-out;
        }

        .double-bounce2 {
            -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
        }

        @-webkit-keyframes bounce {
            0%,
            100% {
                -webkit-transform: scale(0.0)
            }
            50% {
                -webkit-transform: scale(1.0)
            }
        }

        @keyframes bounce {
            0%,
            100% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0);
            }
            50% {
                transform: scale(1.0);
                -webkit-transform: scale(1.0);
            }
        }
    </style>
</head>

<body>
    <div id="loadingContainer">
        <!-- 菊花状的Loading效果 -->
        <h1>菊花状的Loading效果</h1>
        <div class="sk-fading-circle">
            <div class="sk-circle1 sk-circle"></div>
            <div class="sk-circle2 sk-circle"></div>
            <div class="sk-circle3 sk-circle"></div>
            <div class="sk-circle4 sk-circle"></div>
            <div class="sk-circle5 sk-circle"></div>
            <div class="sk-circle6 sk-circle"></div>
            <div class="sk-circle7 sk-circle"></div>
            <div class="sk-circle8 sk-circle"></div>
            <div class="sk-circle9 sk-circle"></div>
            <div class="sk-circle10 sk-circle"></div>
            <div class="sk-circle11 sk-circle"></div>
            <div class="sk-circle12 sk-circle"></div>
        </div>
        <!-- 琴谱版Loading -->
        <h1>琴谱版Loading</h1>
        <div class="spinner">
            <div class="rect1"></div>
            <div class="rect2"></div>
            <div class="rect3"></div>
            <div class="rect4 "></div>
            <div class="rect5"></div>
            <div class="rect6"></div>
        </div>
        <!-- 翻转Loading -->
        <h1>翻转Loading</h1>
        <div class="rotateSpinner"></div>
        <!-- 圆形放大Loading -->
        <h1>圆形放大Loading</h1>
        <div class="ballSpinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
        </div>
    </div>
</body>

</html>